<div nz-row>
  <div nz-col [nzSpan]="6" style="float:left">
    <nz-input-group [nzSuffix]="suffixIconSearch" style="width: 400px">
      <input type="text" nz-input placeholder="请输入搜索内容..." [(ngModel)]="filter" (keyup.enter)="getContainerPage(true)">
    </nz-input-group>
    <ng-template #suffixIconSearch>
      <i nz-icon type="search"></i>
    </ng-template>
  </div>
  <div nz-col [nzSpan]="18" style="text-align: right">
    <button nz-button nzType="primary" (click)="getDownloadFile()">
      <i nz-icon type="download" theme="outline"></i>下载
    </button>
  </div>
</div>

<div>
  <nz-table #ajaxTable nzShowSizeChanger [nzFrontPagination]="false" [nzData]="dataSet" [nzTotal]="total"
    [nzLoading]="loading" [(nzPageIndex)]="pageIndex" [(nzPageSize)]="pageSize" (nzPageIndexChange)="getContainerPage()"
    (nzCurrentPageDataChange)="currentPageDataChange($event)" (nzPageSizeChange)="getContainerPage(true)">
    <!-- <thead (nzSortChange)="sort($event)" nzSingleSort> -->
    <thead>
      <tr>
        <th nzShowCheckbox [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate"
          (nzCheckedChange)="checkAll($event)"></th>
        <th nzShowSort nzSortKey="name">容器名</th>
        <th nzSortKey="email">等级</th>
        <th><span>所属应用</span></th>
        <th><span>服务器数</span></th>
        <th><span>CNNVD</span></th>
        <th><span>CVE</span></th>
        <th><span>发布时间</span></th>
        <th><span>操作</span></th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of ajaxTable.data">
        <td nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="refreshStatus()"></td>
        <td>
          <a routerLink="/layout/assets-management/container/container-detail"
            [queryParams]="{containerId: data.containerId}">
            {{data.containerName}}
          </a>
        </td>
        <td>
          <div class="grade">
            <!-- {{ data.grade }} -->
            <span [ngSwitch]="data.grade">
              <p *ngSwitchCase="'E'" class="grade-E">
                {{ data.grade }}
              </p>
              <p *ngSwitchCase="'D'" class="grade-D">
                {{ data.grade }}
              </p>
              <p *ngSwitchCase="'C'" class="grade-C">
                {{ data.grade }}
              </p>
              <p *ngSwitchCase="'B'" class="grade-B">
                {{ data.grade }}
              </p>
              <p *ngSwitchCase="'A'" class="grade-A">
                {{ data.grade }}
              </p>
              <p *ngSwitchDefault>
                默认
              </p>
            </span>
          </div>

        </td>
        <td>
          <a href="javascript:;" *ngFor="let appList of data?.appList">
            {{appList.name}}
            <br>
          </a>
        </td>
        <td>
          <a href="javascript:;">{{data.serverNum}}</a>
        </td>
        <td>
          <a href="javascript:;">
            {{data.cnnvdNum}}
          </a>
        </td>
        <td>
          <a href="javascript:;">
            {{data.cveNum}}
          </a>
        </td>
        <td>{{data.releaseDate}}</td>
        <td><button nz-button nzType="primary" (click)="showModalMiddle()">确定</button></td>
      </tr>
    </tbody>
  </nz-table>
</div>
<nz-modal nzWrapClassName="vertical-center-modal" [(nzVisible)]="isVisibleMiddle" nzTitle="安全基线"
  (nzOnCancel)="handleCancelMiddle()" (nzOnOk)="handleOkMiddle()">
  <nz-table #smallTable nzBordered [nzShowPagination]="false" [nzData]="data">
    <tbody>
      <tr *ngFor="let data of smallTable.data">
        <td> {{ data.title }} </td>
        <td> {{ data.content }} </td>
      </tr>
    </tbody>
  </nz-table>
</nz-modal>
